<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { orderStatusMap } from '@/constants/order'
import { updateOrderStatus } from '@/api/order/admin'

const props = defineProps<{
  visible: boolean
  orderNo: string
  currentStatus: number
  remark?: string
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}>()

const dialogVisible = ref(false)

// 过滤掉-1状态（所有）
const statusOptions = Object.keys(orderStatusMap)
  .filter((key) => key !== '-1')
  .map((key) => ({
    value: parseInt(key),
    label: orderStatusMap[key]
  }))

const form = reactive({
  orderNo: '',
  orderStatus: 0,
  remark: ''
})

const loading = ref(false)

// 监听visible变化
watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val
    if (val) {
      // 初始化表单数据
      form.orderNo = props.orderNo
      form.orderStatus = props.currentStatus
      form.remark = props.remark || ''
    }
  },
  { immediate: true }
)

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  emit('update:visible', false)
}

// 提交表单
const handleSubmit = async () => {
  if (!form.orderNo) {
    ElMessage.warning('订单号不能为空')
    return
  }

  if (form.orderStatus === undefined) {
    ElMessage.warning('请选择订单状态')
    return
  }

  try {
    loading.value = true
    const res: any = await updateOrderStatus({
      orderNo: form.orderNo,
      orderStatus: form.orderStatus,
      remark: form.remark
    })

    if (res.code === 200) {
      ElMessage.success('订单状态更新成功')
      emit('success')
      // 清空表单数据
      form.orderNo = ''
      form.orderStatus = 0
      form.remark = ''
      handleClose()
    } else {
      ElMessage.error(res.message || '更新失败')
    }
  } catch (error: any) {
    ElMessage.error(error.message || '更新订单状态时发生错误')
    console.error(error)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <el-dialog v-model="dialogVisible" title="修改订单状态" width="500px" :before-close="handleClose">
    <el-form :model="form" label-width="80px" label-position="left">
      <el-form-item label="订单号">
        <el-input v-model="form.orderNo" disabled />
      </el-form-item>

      <el-form-item label="状态" prop="orderStatus">
        <el-select v-model="form.orderStatus" placeholder="请选择订单状态" style="width: 100%">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :rows="3" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
